import React from "react";

function Hello() {
  const show = function () {
    alert("Hello Hello");
  };

  return (
    <div>
      <h2>Hello</h2>
    </div>
  );
}

export default class App extends React.Component {
  // 创建 ref 对象, 返回值为一个带有 current 属性的对象
  //    类型参数T,用于描述后续标记的元素类型，后边后续代码提示
  h1Ref = React.createRef<HTMLHeadingElement>();
  helloRef = React.createRef<Hello>();

  fn1() {
    console.log(this.h1Ref.current);
  }

  fn2() {
    console.log(this.helloRef.current);
  }

  render() {
    console.log("App", this);

    return (
      <div>
        <h1 ref={this.h1Ref}>哈喽 ref</h1>
        <Hello ref={this.helloRef} />
        <hr />
        <button onClick={() => this.fn1()}>点我1</button>
        <button onClick={() => this.fn2()}>点我2</button>
      </div>
    );
  }
}
